<template>
  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        prop="id" v-if="false">
    </el-table-column>
    <el-table-column
        fixed
        prop="title"
        label="标题"
        width="150">
    </el-table-column>
    <el-table-column
        prop="dir1Name"
        label="集合"
        width="120">
    </el-table-column>
    <el-table-column
        prop="reviewTime"
        label="上次复习"
        width="120">
    </el-table-column>
    <el-table-column
        prop="reviewTimes"
        label="复习次数"
        width="120">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template #default="scope">
        <el-button @click="memClick(scope.row)" type="text" size="small">熟悉</el-button>
        <el-button type="text" size="small" @click="forgotClick(scope.row)">忘记</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  inject: ['reload'],
  methods: {
    memClick(row) {
      this.$axios.get("/card/review", {
        params: {
          cardId: row.id
        }
      }).then((response) => {
        if (response.data === true) {
          this.$message({
            type: "success",
            message: "完成" + row.title + "的学习！",
          });
          this.getTodayCards();
        }
      })
    },
    forgotClick(row) {
      this.$axios.get("/card/forgot", {
        params: {
          cardId: row.id
        }
      }).then((response) => {
        if (response.data === true) {
          this.$message({
            type: "success",
            message: "完成" + row.title + "的学习！",
          });
          this.getTodayCards();
        }
      })
    },
    getTodayCards() {
      this.$axios.get("/card/todayCards").then((response) => {
        this.tableData = response.data;
      })
    }
  },

  data() {
    return {
      tableData: []
    }
  },

  created() {
    this.getTodayCards();
  }
}
</script>